<template>
  <view>

    <!-- 头部导航栏 -->
    <view class="top-navigate bg-white" style="padding: 53px 10px 20px 10px;">
      <view class="content cuIcon-back text-xl top-navigate-title" @click="goBack">
      </view>
      <view class="text-xl top-navigate-title">订单详情</view>
    </view>
    <!-- 订单地址定位信息区域 -->
    <view class="addressInfo">
      <view class="item_box">
        订单类型 ：
        <view class="address">
          {{orderInfo.type}}
        </view>
      </view>
      <!-- 代取送 -->
      <view class="order-detail border-top" v-if="orderInfo.type==='代取送'">
        <view class="order-detail-title text-df ">物品类型: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsType}}</text> </view>
        <view class="order-detail-title text-df ">物品重量: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsWeight}}kg</text></view>
        <view class="order-detail-title text-df ">跑腿距离: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.distance}}</text>
        </view>
        <view class="order-detail-title text-df ">备注: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.note}}</text>
        </view>
      </view>
      
      

      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
     
      <view class="item_box" v-if="orderInfo.type==='代购'">
        商品:
        <view class="address">
          {{orderInfo.goodsInfo.goodsDetail}}
        </view>
      </view>
      <view class="item_box" v-if="orderInfo.shopAddress.address">
        指定店铺:
        <view class="address">
          {{orderInfo.shopAddress.address}}
        </view>
      </view>
      
      <view class="item_box">
       用户信息：
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">姓名: <text class="text-gray"
            style="margin-left: 20px;">{{order.userInfo.userName}}</text> </view>
        <view class="order-detail-title text-df ">电话: <text class="text-gray"
            style="margin-left: 20px;">{{order.userInfo.userPhone}}</text></view>
      </view>
      
      <view class="item_box">
       骑手信息：
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">姓名: <text class="text-gray"
            style="margin-left: 20px;">{{order.runnerInfo.runnerName}}</text> </view>
        <view class="order-detail-title text-df ">电话: <text class="text-gray"
            style="margin-left: 20px;">{{order.runnerInfo.runnerPhone}}</text></view>
      </view>

      <view class="item_box" v-if="orderInfo.pickAddress">
        取件 ：
        <view class="address">
          {{orderInfo.pickAddress.address}}
        </view>
      </view>

      <view class="item_box" v-if="orderInfo.deliveryAddress">
        收货：
        <view class="address">
          {{orderInfo.deliveryAddress.address}}
        </view>
      </view>
      
      <view class="item_box">
        送达时间：
        <view class="address">
          {{order.finishedTime}}
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  var timer;
  const uniMapCo = uniCloud.importObject('uni-map-co', {
    customUI: true
  });
  import getCurrentDateTime from '../../utils/currentTime.js'
  const db = uniCloud.database();
  export default {
    data() {
      return {
        //骑手当前位置信息
        runnerAddress: {},
        addressEnd: {},
        amapPlugin: null,
        orderInfo: {},
        order: [],
        id: '',
        imgList: [],
      }
    },
    onLoad(options) {
      console.log('options', JSON.parse(options.order));
      this.order = JSON.parse(options.order)
      this.orderInfo = this.order.orderInfo;
      this.id = JSON.parse(options.order)._id;
      this.addressEnd = {
        latitude: this.orderInfo.deliveryAddress.latitude,
        longitude: this.orderInfo.deliveryAddress.longitude,
        name: this.orderInfo.deliveryAddress.name
      };
      this.imgList = this.orderInfo.goodsInfo.imgList;
    },
    methods: {
      ...mapActions('m_runner', ['getRunnerInfo']),
      goBack() {
        uni.navigateBack(-1)
        // uni.redirectTo({
        //   url: '/subpkg-runner/runner-rush-order/runner-rush-order'
        // });
      },
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url
        });
      },
    },
    computed: {
      ...mapState('m_runner', ['runnerInfo']),
      //地图高度属性
      heightCom() {
        let systemInfo = uni.getSystemInfoSync();
        return `${systemInfo.windowHeight-97}px`;
      },
    },
    watch: {},
  }
</script>

<style lang="scss">
  .top-navigate {
    z-index: !important;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }


  .addressInfo {
    width: 100%;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .order-detail {
      background-color: #ffffff;
      padding: 1rpx 30rpx;
      display: flex;
      min-height: 100rpx;
      justify-content: space-between;
      flex-direction: column;
      border-bottom: 1px solid #eee;

      .order-detail-title {
        margin: 10px 0;
      }
    }

    .item_box {
      height: 45px;
      display: flex;
      font-size: 16px;
      align-items: center;
      justify-content: space-between;
      line-height: 45px;
      margin: 5px 16px;

      .address {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>